<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
	<head>
		<title>展示</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
		<link rel="stylesheet" type="text/css" href="./css/index2.css" />
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<style type="text/css">
			.dialog>::v-deep.el-dialog {
				min-width: 900px;

			}

			.dialog>::v-deep.cascader {
				display: block;
			}

			.dialog>::v-deep.el-image {
				width: 80px;
				height: 80px;
				margin-right: 20px;
			}

			.dialog>.images {
				margin: 10px 25px;
			}

			.avatar-uploader {
				display: inline-block;
				margin-right: 20px;


			}

			.avatar-uploader>::v-deep .el-upload {
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
				width: 80px;
				height: 80px;
			}

			.avatar-uploader>::v-deep .el-upload:hover {
				border-color: #409EFF;
			}

			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 80px;
				height: 80px;
				line-height: 80px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div id="em">
			<div class="tab">
				<div class="tab-left" :class="this.showTab==0?'bg-2388FF':''" @click="()=>{this.showTab=0}">实时数据</div>
				<div class="tab-right" :class="this.showTab==1?'bg-2388FF':''" @click="()=>{this.showTab=1}">设备资料</div>
			</div>
			<div v-show="showTab==0">
				<div id="info">
					<div class="loading" v-if="!showLeft">
						<div class="loader"></div>
						<div class="loading-text" v-html="`3D模型正在加载中...(${percentage})`"></div>
					</div>
				</div>
				<div v-if="showLeft">
					<div class="tip">
						<div class="tip-top">
							<div class="tip-title">报警预警速度设定值</div>
							<div class="tip-right">
								<div class="tip-right">
									<img class="tip-right-img" src="img/monitoring/zhendong1.gif">
									<span>4.0(mm/s)</span>
								</div>
								<div class="tip-right">
									<img class="tip-right-img" src="img/monitoring/zhendong2.gif">
									<span>7.1(mm/s)</span>
								</div>
								<div class="tip-right">
									<img class="tip-right-img" src="img/monitoring/zhendong3.gif">
									<span>10(mm/s)</span>
								</div>
							</div>
						</div>
						<div class="tip-top">
							<div class="tip-title">温度预警设定值</div>
							<div class="tip-right">
								<div class="tip-right">
									<img class="tip-right-img" src="img/monitoring/wendu3.gif">
									<span>80(℃)</span>
								</div>
							</div>
						</div>
					</div>
					<div class="leftBox-topInit" v-show="isShowNum==0">
						<img class="leftBox-tapImg" src="./img/icon-zhan1.png" @click="setShow(1)">
					</div>

					<div v-show="isShowNum==1">
						<div class="leftBox">
							<div class="leftBox-tap">
								<img src="./img/back.png" @click="backToThreeD" style="position: absolute;"
									v-if="canBack!=2">
								<img class="leftBox-tapImg" src="./img/icon-zhan.png"
									style="position: relative;left: 180px;" @click="setShow(0)">
							</div>
							<div class="box-left">
								<div class="box-left-item" v-for="(item,i) in leftList" :key="i" :id="'child'+i">
									<div class="item-title" @mouseover="clickLeftItemTitle(item)"
										@mouseout="leaveLeftItem">{{item.group}}</div>
									<div class="item-content">
										<div class="content-item" v-for="(item2,i) in item.alarmComps" :key="item2.id"
											:id="item2.id" @mouseover="hoverLeftItem(item2)"
											:style="{'background-color':item2.color}" @click="openPartInfo(item2)"
											:class="clickId==item2.id?'bgColor':''">
											<div class="content-item-text" :title="item2.name">{{item2.name}}</div>
											<img class="content-item-rightIcon" :title="item2.measName"
												v-if="item2.measId&&item2.measAlarm==0"
												src="img/monitoring/wendu0.gif" />
											<img class="content-item-rightIcon" :title="item2.measName"
												v-else-if="item2.measId&&item2.measAlarm==1"
												src="img/monitoring/wendu1.gif" />
											<img class="content-item-rightIcon" :title="item2.measName"
												v-else-if="item2.measId&&item2.measAlarm==2"
												src="img/monitoring/wendu2.gif" />
											<img class="content-item-rightIcon" :title="item2.measName"
												v-else-if="item2.measId&&item2.measAlarm==3"
												src="img/monitoring/wendu3.gif" />
										</div>
										<div class="content-item" v-for="(item2,i) in item.normalComps" :key="item2.id"
											:id="item2.id" @mouseover="hoverLeftItem(item2)" @mouseout="leaveLeftItem"
											@click="openPartInfo(item2)" :class="clickId==item2.id?'bgColor':''"
											v-if="item.showAll">
											<div class="content-item-text" :title="item2.name">{{item2.name}}</div>
											<img class="content-item-rightIcon" :title="item2.measName"
												v-if="item2.measId&&item2.measAlarm==0"
												src="img/monitoring/wendu0.gif" />
											<img class="content-item-rightIcon" :title="item2.measName"
												v-else-if="item2.measId&&item2.measAlarm==1"
												src="img/monitoring/wendu1.gif" />
											<img class="content-item-rightIcon" :title="item2.measName"
												v-else-if="item2.measId&&item2.measAlarm==2"
												src="img/monitoring/wendu2.gif" />
											<img class="content-item-rightIcon" :title="item2.measName"
												v-else-if="item2.measId&&item2.measAlarm==3"
												src="img/monitoring/wendu3.gif" />
										</div>
									</div>
									<div class="item-btn" @click="changeCardShow(item,i)">
										<img src="img/cardShouqi.png" v-if="item.showAll" />
										<img src="img/cardZhankai.png" v-else />
									</div>
								</div>
							</div>
							<!-- <ul class="box-left" id="parent">
								<li style="position: relative;" v-for="(item,i) in leftList" :key="i"
									:id="'child'+i">
									<div class="parts" :class="item.showColor==true?'parts-cur':''"
										:style="{backgroundColor:item.alarmLevel==1?'#AB8D15':item.alarmLevel==2?'#995D12':item.alarmLevel==3?'#80232E':''}"
										:key="item.id" @click="setHighlight(i,item.unitId,0)" v-html="`${item.name}`">
									</div>
								</li>
							</ul> -->
						</div>
					</div>

					<div class="box-right" v-if="currentPart">
						<div class="box-right-title">智能分析</div>
						<div class="box-right-desc" v-html="desc?desc:'无'"></div>
					</div>
				</div>
			</div>
			<div v-show="showTab==1" style="overflow-y: auto;height: 100vh;">
				<div class="zl-top">
					<div class="zl-top-left">
						<img class="zl-top-left-img"
							:src="unitDetail.img?imgUrl+unitDetail.img:'./img/placeholder.png'">
						<div class="zl-top-left-text" v-for="(item,i) in unitDetail.args" :key="i">
							{{item}}
						</div>
						<div class="zl-top-left-text" v-if="!unitDetail.args">
							无参数
						</div>

					</div>
					<div class="zl-top-right">
						<div class="zl-top-from">
							<div class="zl-top-from-th">
								<div class="td1">报警时间</div>
								<div class="td2">测点</div>
								<div class="td3">类型</div>
								<div class="td4">报警值</div>
								<div class="td5">限值</div>
								<div class="td6">处理状态</div>
								<div class="td7">说明</div>
							</div>
							<div class="zl-top-from-td" v-if="unitId=='359b6c22b48a659bed705a3dad23b40b'">
								<div class="td1">2021.9.13</div>
								<div class="td2">24架传动箱输入端</div>
								<div class="td3">振动</div>
								<div class="td4">2.36</div>
								<div class="td5">1级：2.3 2级：4.5 3级：7.1</div>
								<div class="td6">已处理</div>
								<div class="td7"
									title="1、24架传动箱振动值偏大，判断为地脚螺栓存在松动问题,2、建议：（1）及时对24架地脚螺栓进行紧固；（2）持续跟踪传动箱振动变化趋势，避免振动值过大引发事故停机。">
									1、24架传动箱振动值偏大，判断为地脚螺栓存在松动问题,
									2、建议：（1）及时对24架地脚螺栓进行紧固；（2）持续跟踪传动箱振动变化趋势，避免振动值过大引发事故停机。</div>
							</div>
							<div v-if="unitId=='359b6c22b48a659bed705a3dad23b40b'">
								<div class="zl-top-from-td">
									<div class="td1">2021.9.13</div>
									<div class="td2">24架传动箱输出端</div>
									<div class="td3">振动</div>
									<div class="td4">2.6</div>
									<div class="td5">1级：2.3 2级：4.5 3级：7.1</div>
									<div class="td6">已处理</div>
									<div class="td7"
										title="1、24架传动箱振动值偏大，判断为地脚螺栓存在松动问题,2、建议：（1）及时对24架地脚螺栓进行紧固；（2）持续跟踪传动箱振动变化趋势，避免振动值过大引发事故停机。">
										1、24架传动箱振动值偏大，判断为地脚螺栓存在松动问题,
										2、建议：（1）及时对24架地脚螺栓进行紧固；（2）持续跟踪传动箱振动变化趋势，避免振动值过大引发事故停机。</div>
								</div>
								<div class="zl-top-from-td" v-for="i in 4" :key="i">
									<div class="td1"></div>
									<div class="td2"></div>
									<div class="td3"></div>
									<div class="td4"></div>
									<div class="td5"></div>
									<div class="td6"></div>
									<div class="td7"></div>
								</div>
							</div>

							<div v-else-if="unitId=='1451023946131505154'||unitId=='1450109724077912066'">
								<div class="zl-top-from-td">
									<div class="td1">2021-10-18</div>
									<div class="td2">输入端轴向</div>
									<div class="td3">振动</div>
									<div class="td4">5.2MM/S</div>
									<div class="td5">1级报警:4；2级报警:7.1；3级报警:10；</div>
									<div class="td6">已处理</div>
									<div class="td7" title="该设备存在齿轮（HW1D150-018）与齿轮（HW1D150-018）啮合不良故障；">
										该设备存在齿轮（HW1D150-018）与齿轮（HW1D150-018）啮合不良故障；
									</div>
								</div>
								<div class="zl-top-from-td">
									<div class="td1">2021-10-17</div>
									<div class="td2">输入端轴向</div>
									<div class="td3">振动</div>
									<div class="td4">5.8MM/S</div>
									<div class="td5">1级报警:4；2级报警:7.1；3级报警:10；</div>
									<div class="td6">已处理</div>
									<div class="td7" title="该设备存在齿轮（HW1D150-018）与齿轮（HW1D150-018）啮合不良故障；">
										该设备存在齿轮（HW1D150-018）与齿轮（HW1D150-018）啮合不良故障；
									</div>
								</div>
								<div class="zl-top-from-td" v-for="i in 2" :key="i">
									<div class="td1"></div>
									<div class="td2"></div>
									<div class="td3"></div>
									<div class="td4"></div>
									<div class="td5"></div>
									<div class="td6"></div>
									<div class="td7"></div>
								</div>
							</div>

							<div v-else>
								<div class="zl-top-from-td" v-for="i in 4" :key="i">
									<div class="td1"></div>
									<div class="td2"></div>
									<div class="td3"></div>
									<div class="td4"></div>
									<div class="td5"></div>
									<div class="td6"></div>
									<div class="td7"></div>
								</div>
							</div>


						</div>
						<el-button type="primary" size="medium" @click="()=>{this.visiable = true}"
							style="margin-left: 16px;">
							新增记录
						</el-button>
						<div class="zl-top-from">
							<div class="zl-top-from-th">
								<div class="td8">检修时间</div>
								<div class="td9">检修类型</div>
								<div class="td10">维护原因</div>
								<div class="td11">检测内容</div>
							</div>
							<div v-if="unitId=='1451023946131505154'||unitId=='1450109724077912066'">
								<div class="zl-top-from-td" @click="()=>{this.visiable2 = true;this.formData2.type=2;}">
									<div class="td8">2021-10-18</div>
									<div class="td9">更换</div>
									<div class="td10">设备报警</div>
									<div class="td11">更换圆柱齿轮 HW1D150-018</div>
								</div>
								<div class="zl-top-from-td" @click="()=>{this.visiable2 = true;this.formData2.type=1}">
									<div class="td8">2021-10-17</div>
									<div class="td9">检查</div>
									<div class="td10">日常点检</div>
									<div class="td11">常规状态检测</div>
								</div>
								<div class="zl-top-from-td" v-for="i in 2" :key="i">
									<div class="td8"></div>
									<div class="td9"></div>
									<div class="td10"></div>
									<div class="td11"></div>
								</div>
							</div>
							<div v-else>
								<div class="zl-top-from-td" v-for="i in 5" :key="i">
									<div class="td8"></div>
									<div class="td9"></div>
									<div class="td10"></div>
									<div class="td11"></div>
								</div>
							</div>

						</div>
					</div>
				</div>
				<el-button type="primary" size="medium" @click="()=>{this.visiable = true;this.formData.type = 2}"
					style="margin-left: 16px;">
					新增记录
				</el-button>
				<div>
					<div class="zl-top-from">
						<div class="zl-top-from-th">
							<div class="td12">零部件</div>
							<div class="td12">上线时间</div>
							<div class="td12">使用时长/天</div>
							<div class="td12">预期寿命/天</div>
							<div class="td12">上次检测时间</div>
							<div class="td12">检测状态</div>
							<div class="td13">维护原因</div>
						</div>
						<div v-if="unitId=='1451023946131505154'||unitId=='1450109724077912066'">
							<div class="zl-top-from-td" v-for="(item,i) in tableData" :key="i">
								<div class="td12">{{item.name}}</div>
								<div class="td12">{{item.time1}}</div>
								<div class="td12">{{item.day1}}</div>
								<div class="td12">{{item.day2}}</div>
								<div class="td12">{{item.time2}}</div>
								<div class="td12">{{item.status}}</div>
								<div class="td13">{{item.type}}</div>
							</div>
						</div>
						<div v-else>
							<div class="zl-top-from-td" v-for="i in 8" :key="i">
								<div class="td12"></div>
								<div class="td12"></div>
								<div class="td12"></div>
								<div class="td12"></div>
								<div class="td12"></div>
								<div class="td12"></div>
								<div class="td13"></div>
							</div>
						</div>


					</div>
				</div>
			</div>
			<el-dialog class="dialog" title="新增/编辑检修记录" :visible.sync="visiable">
				<div v-loading="loading" class="dlalog-body">
					<el-form ref="form" :model="formData" label-width="120px">
						<el-row>
							<el-col :span="12">
								<el-form-item label="厂区：" prop="accountNo">
									<el-select v-model="formData.roleIds" multiple collapse-tags clearable
										:popper-append-to-body="false" placeholder="请选择" @change="$forceUpdate()">
										<el-option v-for="item in roles" :key="item.id" :label="item.name"
											:value="item.id">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="车间：" prop="mobile">
									<el-select v-model="formData.gaoxianId" multiple collapse-tags clearable
										:popper-append-to-body="false" placeholder="请选择" @change="$forceUpdate()">
										<el-option v-for="item in gaoxian" :key="item.id" :label="item.name"
											:value="item.id">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="设备名称：" prop="name">
									<el-select v-model="formData.name" multiple collapse-tags clearable
										:popper-append-to-body="false" placeholder="请选择" @change="$forceUpdate()">
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="检修时间：">
									<el-date-picker v-model="formData.time" value-format="yyyy-MM-dd HH:mm:ss"
										type="datetime" placeholder="请选择日期">
									</el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="检测类型*：">
									<el-radio-group v-model="formData.type">
										<el-radio :label="1">检查</el-radio>
										<el-radio :label="2">更换</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="责任人：">
									<el-input v-model="formData.human"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row v-if="formData.type==1">
							<el-col :span="12" style="padding:0 30px 20px;">
								<span>填写本次检测结果：</span>
							</el-col>
							<el-col :span="12" style="padding:0 30px 20px;">
								<span>上次检测结果（2021-10-18）</span>
							</el-col>
						</el-row>
						<el-row v-if="formData.type==1">
							<el-col :span="12" style="padding:0 30px;">
								<el-table :data="tableData" border style="width: 100%">
									<el-table-column prop="name" label="设备部件">
									</el-table-column>
									<el-table-column prop="stat" label="运行状态">
										<template slot-scope="scope">
											<el-radio-group v-model="scope.row.stat">
												<el-radio :label="1">良</el-radio>
												<el-radio :label="2">中</el-radio>
												<el-radio :label="3">差</el-radio>
											</el-radio-group>
										</template>
									</el-table-column>
								</el-table>
							</el-col>
							<el-col :span="12" style="padding:0 30px;">
								<el-table :data="tableData" border style="width: 100%">
									<el-table-column prop="name" label="设备部件">
									</el-table-column>
									<el-table-column prop="status" label="运行状态">
									</el-table-column>
								</el-table>
							</el-col>
						</el-row>
						<el-row v-if="formData.type==2">
							<el-col :span="12" style="padding:0 30px 20px;">
								<span>选择本次更换部件：</span>
							</el-col>
							<el-col :span="12" style="padding:0 30px 20px;">
								<span>上次更换时间（2021-10-18）</span>
							</el-col>
						</el-row>
						<el-row v-if="formData.type==2">
							<el-col :span="12" style="padding:0 30px;">
								<el-table :data="tableData" border style="width: 100%">
									<el-table-column prop="name" label="设备部件">
									</el-table-column>
									<el-table-column prop="stat" label="是否更换">
										<template slot-scope="scope">
											<el-radio-group v-model="scope.row.stat">
												<el-radio :label="1">是</el-radio>
												<el-radio :label="2">否</el-radio>
											</el-radio-group>
										</template>
									</el-table-column>
									<el-table-column prop="stat" label="设备寿命(天)">
										<template slot-scope="scope">
											<el-input v-model="scope.day"></el-input>
										</template>
									</el-table-column>
								</el-table>
							</el-col>
							<el-col :span="12" style="padding:0 30px;">
								<el-table :data="tableData" border style="width: 100%">
									<el-table-column prop="name" label="设备部件">
									</el-table-column>
									<el-table-column prop="time1" label="上次更换时间">
									</el-table-column>
									<el-table-column prop="day1" label="设备寿命(天)">
									</el-table-column>
									<el-table-column prop="day2" label="建议使用寿命(天)">
									</el-table-column>
								</el-table>
							</el-col>
						</el-row>
						<el-row style="margin-top: 20px;">
							<el-col :span="24">
								<el-form-item label="维修原因：">
									<el-input type="textarea" v-model="formData.reason"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="()=>{this.visiable = false}">关闭</el-button>
						<el-button type="primary" @click="()=>{this.visiable = false}">确定</el-button>
					</div>
				</div>
			</el-dialog>
			<el-dialog class="dialog" title="查看检修记录" :visible.sync="visiable2">
				<div v-loading="loading2" class="dlalog-body">
					<el-form ref="form" :model="formData2" label-width="120px">
						<el-row>
							<el-col :span="12">
								<el-form-item label="厂区：" prop="accountNo">
									<el-select v-model="formData2.roleIds" multiple collapse-tags clearable disabled
										:popper-append-to-body="false" placeholder="请选择" @change="$forceUpdate()">
										<!-- <el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.id">
										</el-option> -->
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="车间：" prop="mobile">
									<el-select v-model="formData2.roleIds" multiple collapse-tags clearable disabled
										:popper-append-to-body="false" placeholder="请选择" @change="$forceUpdate()">
										<!-- <el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.id">
										</el-option> -->
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="设备名称：" prop="name">
									<el-select v-model="formData2.roleIds" multiple collapse-tags clearable disabled
										:popper-append-to-body="false" placeholder="请选择" @change="$forceUpdate()">
										<!-- <el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.id">
										</el-option> -->
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="检修时间：">
									<el-date-picker v-model="formData2.regTimeStart" value-format="yyyy-MM-dd HH:mm:ss"
										type="datetime" placeholder="请选择日期" disabled>
									</el-date-picker>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="12">
								<el-form-item label="检测类型*：">
									<el-radio-group v-model="formData2.type" disabled>
										<el-radio :label="1">检查</el-radio>
										<el-radio :label="2">更换</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="责任人：">
									<el-input v-model="formData2.email" disabled></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row v-if="formData2.type==1">
							<el-col :span="12" style="padding:0 30px 20px;">
								<span>填写本次检测结果：</span>
							</el-col>
							<el-col :span="12" style="padding:0 30px 20px;">
								<span>上次检测结果（2021-10-17）</span>
							</el-col>
						</el-row>
						<el-row v-if="formData2.type==1">
							<el-col :span="12" style="padding:0 30px;">
								<el-table :data="tableData" border style="width: 100%">
									<el-table-column prop="name" label="设备部件">
									</el-table-column>
									<el-table-column prop="status" label="运行状态">
										<template slot-scope="scope">
											<el-radio-group v-model="scope.row.status" disabled>
												<el-radio label="良">良</el-radio>
												<el-radio label="中">中</el-radio>
												<el-radio label="差">差</el-radio>
											</el-radio-group>
										</template>
									</el-table-column>
								</el-table>
							</el-col>
							<el-col :span="12" style="padding:0 30px;">
								<el-table :data="tableData" border style="width: 100%">
									<el-table-column prop="name" label="设备部件">
									</el-table-column>
									<el-table-column prop="status" label="运行状态">
									</el-table-column>
								</el-table>
							</el-col>
						</el-row>
						<el-row v-if="formData2.type==2">
							<el-col :span="12" style="padding:0 30px 20px;">
								<span>选择本次更换部件：</span>
							</el-col>
							<el-col :span="12" style="padding:0 30px 20px;">
								<span>上次更换时间（2021-10-18）</span>
							</el-col>
						</el-row>
						<el-row v-if="formData2.type==2">
							<el-col :span="12" style="padding:0 30px;">
								<el-table :data="tableData" border style="width: 100%">
									<el-table-column prop="name" label="设备部件">
									</el-table-column>
									<el-table-column prop="genghuan" label="是否更换">
										<template slot-scope="scope">
											<el-radio-group v-model="scope.row.genghuan" disabled>
												<el-radio label="1">是</el-radio>
												<el-radio label="2">否</el-radio>
											</el-radio-group>
										</template>
									</el-table-column>
									<el-table-column prop="stat" label="设备寿命(天)">
										<template slot-scope="scope">
											<el-input v-model="scope.day" disabled></el-input>
										</template>
									</el-table-column>
								</el-table>
							</el-col>
							<el-col :span="12" style="padding:0 30px;">
								<el-table :data="tableData" border style="width: 100%">
									<el-table-column prop="name" label="设备部件">
									</el-table-column>
									<el-table-column prop="time1" label="上次更换时间">
									</el-table-column>
									<el-table-column prop="day1" label="设备寿命(天)">
									</el-table-column>
									<el-table-column prop="day2" label="建议使用寿命(天)">
									</el-table-column>
								</el-table>
							</el-col>
						</el-row>
						<el-row style="margin-top: 20px;">
							<el-col :span="24">
								<el-form-item label="维修原因：">
									<el-input type="textarea" v-model="formData2.email" disabled></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="()=>{this.visiable2 = false}">关闭</el-button>
						<el-button type="primary" @click="()=>{this.visiable2 = false}">确定</el-button>
					</div>
				</div>
			</el-dialog>

			<el-dialog class="dialog" :title="currentPart.name" width="40%" :visible.sync="partVisiable">
				<div v-loading="loading2" class="dlalog-body">
					<iframe :src="partUrl" width="100%" frameborder="no" border="0" marginwidth="0" marginheight="0"
						style="height:400px;width:800px"></iframe>
					<el-button type="text" @click="showPartRecords=true;"
						style="position: absolute;top: 250px;left: 350px;">零件记录</el-button>
					<div slot="footer" class="dialog-footer">
						<el-button @click="()=>{this.partVisiable = false}">关闭</el-button>
						<el-button type="primary" @click="()=>{this.partVisiable = false}">确定</el-button>
					</div>
				</div>
			</el-dialog>
			<el-dialog class="dialog" title="零件记录" :visible.sync="showPartRecords">
				<div class="dlalog-body">
					<el-table :data="partRecordsData" border style="width: 100%;margin-bottom:20px" height="300">
						<el-table-column prop="no" label="序号">
						</el-table-column>
						<el-table-column prop="stat" label="状态">
						</el-table-column>
						<el-table-column prop="time" label="时间">
						</el-table-column>
					</el-table>
					<div slot="footer" class="dialog-footer">
						<el-button @click="showPartRecords = false">关闭</el-button>
						<el-button type="primary" @click="showPartRecords = false">确定</el-button>
					</div>
				</div>
			</el-dialog>
		</div>
	</body>
	<script src="./js/vue.js"></script>
	<script src="./js/jquery-3.6.0.min.js"></script>
	<script src="./js/echarts.min.js"></script>
	<script type="text/javascript" src="js/uni.webview.1.5.2.js"></script>
	<script src="./js/three/three.js"></script>

	<script src="./js/three/loaders/STLLoader.js"></script>
	<script src="./js/three/CSS2DRenderer.js"></script>
	<script src="./js/three/Detector.js"></script>
	<script src="./js/three/controls/OrbitControls.js"></script>
	<script src="./js/three/libs/stats.min.js"></script>
	<script src="./js/md5.js"></script>
	<!-- 引入axios -->
	<script src="./js/axios.js"></script>

	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>



	<script>
		if (!Detector.webgl) Detector.addGetWebGLMessage();
		// var container = document.createElement( 'div' );
		var container;
		var times;
		var stats = new Stats();
		var raycaster = new THREE.Raycaster();
		var mouse = new THREE.Vector2();
		var group = new THREE.Group();
		var loader = new THREE.STLLoader();
		var daColor, previous = null,
			cnt = 0;
		var camera, cameraTarget, scene, renderer, labelRenderer;
		var overall = [],
			clickArr = [],
			tipArr = [];
		var width = window.innerWidth;
		var height = window.innerHeight;
		var unitId2 = getParamValue('unitId')
		var app = new Vue({
			el: '#em',
			data: {
				dataJson: [], //所有数据
				showDataJson: [], //筛洗出来可点击的数据
				leftList: [],
				unitId: '',
				typeId: '',
				showLeft: false,
				url: '',
				imgUrl: '',
				percentage: '0%',
				clickIndex: null,
				desc: '',
				isShowNum: 1, //是否显示左边内容
				isShowPopupLeft: false, //是否显示左边弹出框
				isShowPopupRight: false, //是否显示右边弹出框
				MeasList: [], //测点数据
				MeasName: '', //测点名字
				meas_id: '', //测点id
				Measdetails: [],
				clickTimetype: false,
				canBack: 1,
				oldColor: '',
				overallIndex: '',
				dantiPopStyle1: {},
				dantiPopStyle2: {},
				currentMeas1: "",
				currentMeas2: "",
				measType: "",
				option: {},
				measDef: "加速度",
				measTitle: "",
				showTab: 0, //显示哪个tab
				unitDetail: '', //单体详情
				currentPart: "",
				partVisiable: false,
				partUrl: "",
				clickId: "",
				showPartRecords: false,
				partRecordsData: [],
				roles: [{
						name: '扎钢一厂',
						id: 1
					},
					{
						name: '扎钢二厂',
						id: 2
					},
					{
						name: '烧结厂',
						id: 3
					},
					{
						name: '热处理板厂',
						id: 4
					},
					{
						name: '炼铁厂',
						id: 5
					},
					{
						name: '炼钢厂',
						id: 6
					},
					{
						name: '焦化厂',
						id: 7
					},
					{
						name: '原料厂',
						id: 8
					},
				],
				gaoxian: [{
						name: '一车间（双高棒）',
						id: 0
					},
					{
						name: '二车间（单高线）',
						id: 1
					},
					{
						name: '三车间（单高线）',
						id: 2
					},
					{
						name: '四车间（单高线）',
						id: 3
					},
					{
						name: '五车间（双高棒））',
						id: 4
					},
					{
						name: '六车间（双高线）',
						id: 5
					},
					{
						name: '七车间（普棒）',
						id: 6
					}
				],
				loading: false,
				formData: {
					type: 1,
					roleIds: '',
					gaoxianId: '',
					name: ''
				},
				visiable: false,
				visiable2: false,
				loading2: false,
				formData2: {
					type: 1,
					roleIds: ''
				},
				tableData: [{
						name: '圆柱齿轮 HW1D150-018',
						time1: '2021-7-1',
						day1: '5',
						day2: '1635',
						time2: '2021-10-18',
						status: '差',
						type: '报警',
						stat: '',
						genghuan: '1'
					},
					{
						name: '输入轴 HW1D150-021',
						time1: '2021-10-18',
						day1: '251',
						day2: '1389',
						time2: '2021-10-18',
						status: '良',
						type: '日常点检',
						stat: '',
						genghuan: '2'
					},
					{
						name: '圆柱齿轮 HW1D150-018',
						time1: '2021-7-1',
						day1: '5',
						day2: '1635',
						time2: '2021-10-18',
						status: '差',
						type: '报警',
						stat: '',
						genghuan: '1'
					},
					{
						name: '滚动轴承 SKF7014ACD/P4ADJA',
						time1: '2021-7-1',
						day1: '251',
						day2: '1389',
						time2: '2021-10-18',
						status: '良',
						type: '日常点检',
						stat: '',
						genghuan: '2'
					},
					{
						name: '滚动轴承 SKF7214ACD/P4ADFVJ107',
						time1: '2021-7-1',
						day1: '251',
						day2: '1389',
						time2: '2021-10-18',
						status: '良',
						type: '日常点检',
						stat: '',
						genghuan: '2'
					},
					{
						name: '被动轴 HW1D150-022',
						time1: '2021-7-1',
						day1: '251',
						day2: '1389',
						time2: '2021-10-18',
						status: '良',
						type: '日常点检',
						stat: '',
						genghuan: '2'
					},
					{
						name: '圆柱齿轮 HW1D150-018',
						time1: '2021-7-1',
						day1: '251',
						day2: '1389',
						time2: '2021-10-18',
						status: '良',
						type: '日常点检',
						stat: '',
						genghuan: '2'
					},
					{
						name: '滚动轴承 SKF7014ACD/P4ADJA',
						time1: '2021-7-1',
						day1: '251',
						day2: '1389',
						time2: '2021-10-18',
						status: '良',
						type: '日常点检',
						stat: '',
						genghuan: '2'
					},
					{
						name: '滚动轴承 SKF7214ACD/P4ADFVJ107',
						time1: '2021-7-1',
						day1: '251',
						day2: '1389',
						time2: '2021-10-18',
						status: '良',
						type: '日常点检',
						stat: '',
						genghuan: '2'
					},
					{
						name: '辊轴 HW1D150-101-A00',
						time1: '2021-7-1',
						day1: '251',
						day2: '1389',
						time2: '2021-10-18',
						status: '良',
						type: '日常点检',
						stat: ''
					},
					{
						name: '滚动轴承 SKF7015ACD/P4ADFA',
						time1: '2021-7-1',
						day1: '251',
						day2: '1389',
						time2: '2021-10-18',
						status: '良',
						type: '日常点检',
						stat: '',
						genghuan: '2'
					},
					{
						name: '圆柱齿轮 HW1D150-108-A00',
						time1: '2021-7-1',
						day1: '251',
						day2: '1389',
						time2: '2021-10-18',
						status: '良',
						type: '日常点检',
						stat: '',
						genghuan: '2'
					},
					{
						name: '滑动轴承 HW1D150-102-A00',
						time1: '2021-7-1',
						day1: '251',
						day2: '1389',
						time2: '2021-10-18',
						status: '良',
						type: '日常点检',
						stat: '',
						genghuan: '2'
					},
					{
						name: '滑动轴承HW1D150-102-A00',
						time1: '2021-7-1',
						day1: '251',
						day2: '1389',
						time2: '2021-10-18',
						status: '良',
						type: '日常点检',
						stat: '',
						genghuan: '2'
					},
					{
						name: '辊轴 HW1D150-101-A00',
						time1: '2021-7-1',
						day1: '251',
						day2: '1389',
						time2: '2021-10-18',
						status: '良',
						type: '日常点检',
						stat: '',
						genghuan: '2'
					},
					{
						name: '圆柱齿轮 HW1D150-108-A00',
						time1: '2021-7-1',
						day1: '251',
						day2: '1389',
						time2: '2021-10-18',
						status: '良',
						type: '日常点检',
						stat: '',
						genghuan: '2'
					},
					{
						name: '滚动轴承 SKF7015ACD/P4ADFA',
						time1: '2021-7-1',
						day1: '251',
						day2: '1389',
						time2: '2021-10-18',
						status: '良',
						type: '日常点检',
						stat: '',
						genghuan: '2'
					},
					{
						name: '滑动轴承 HW1D150-102-A00',
						time1: '2021-7-1',
						day1: '251',
						day2: '1389',
						time2: '2021-10-18',
						status: '良',
						type: '日常点检',
						stat: '',
						genghuan: '2'
					},
					{
						name: '滑动轴承 HW1D150-102-A00',
						time1: '2021-7-1',
						day1: '251',
						day2: '1389',
						time2: '2021-10-18',
						status: '良',
						type: '日常点检',
						stat: '',
						genghuan: '2'
					},

				]
			},
			created() {
				this.unitId = getParamValue('unitId')
				this.typeId = getParamValue('typeId')
				this.url = getParamValue('url')
				this.imgUrl = getParamValue('imgUrl')
				this.canBack = getParamValue('canBack')
				this.getDataOrder();
				this.getLeftList();
			},
			methods: {
				changeCardShow(item, i) {
					let obj = item;
					obj.showAll = !item.showAll;
					this.$set(this.leftList, i, obj);
				},
				clickLeftItemTitle(item) {
					this.setHighlight(item.comps, 2);
				},
				hoverLeftItem(item) {
					this.setHighlight(item, 1);
				},
				leaveLeftItem() {
					this.setHighlight();
				},
				//打开零件信息弹窗
				openPartInfo(item) {
					this.currentPart = item;
					this.desc = item.alarmDesc;
					this.partUrl = "/html/part.html?token=" +
						getParamValue('token') +
						"&id=" +
						item.id +
						"&url=" +
						this.url +
						"&imgUrl=" +
						this.imgUrl;
					this.partVisiable = true;
				},
				//打开图谱
				openTuPu(e, item, MeasList) {
					e.meas_id = item.id;
					if (!e.type) {
						e.type = 1000;
					}
					window.parent.postMessage({
						data: {
							row: e,
							rows: MeasList,
							type: 3
						}
					})
				},
				backToThreeD() {
					window.parent.postMessage({
						data: {
							type: 4
						}
					})
				},
				//展开收起左侧
				setShow(e) {
					this.isShowNum = e;
				},
				//打开整线列表
				openPopupLeft() {
					this.isShowPopupLeft = !this.isShowPopupLeft
				},

				setColor(color) {
					return Number('0x' + color)
				},
				setView() {
					// 设置颜色，加载模型
					this.dataJson.forEach((item, i) => {
						item.stlFile = this.imgUrl + item.stlFile;
						item.showColor = false;
						item.color = this.setColor(item.color);
						loaderFile(item, i, this.dataJson.length).then((data) => {
							this.percentage = data.sum;
							if (data.type) {
								this.showLeft = true;
							}
						})
					})
				},
				getLeftList() {
					let _this = this;
					let url = _this.url + '/backend-api/app/model/group/get';
					let token = getParamValue('token')
					let header1 = getHeaderJson(token)
					let header2 = {
						"Content-Type": 'application/x-www-form-urlencoded'
					}
					let param = {};
					param.unitId = this.unitId;
					param.typeId = this.typeId;
					axios({
						headers: Object.assign(header1, header2),
						method: 'get',
						url: url,
						params: param
					}).then(function(response) {
						if (response.data.code === 1000) {
							//直接赋值所有数据，加载模型市要用
							_this.leftList = response.data.data;
							for (let item of _this.leftList) {
								item.showAll = false;
							}
						}
					}).catch(function(error) {
						console.log(error)
					})
				},
				getDataOrder(ordernos, appid) {
					let _this = this;
					let url = _this.url + '/backend-api/app/model/get';
					let token = getParamValue('token')
					let header1 = getHeaderJson(token)
					let header2 = {
						"Content-Type": 'application/x-www-form-urlencoded'
					}
					let param = {};
					param.unitId = this.unitId;
					param.typeId = this.typeId;
					axios({
						headers: Object.assign(header1, header2),
						method: 'get',
						url: url,
						params: param
					}).then(function(response) {
						if (response.data.code === 1000) {
							//直接赋值所有数据，加载模型市要用
							_this.dataJson = response.data.data;
							let arr = []
							//循环一边，筛选出只能点击的数据
							_this.dataJson.forEach(item => {
								if (item.button == 1) {
									arr.push(item)
								}
							})
							_this.getMeasList(_this.dataJson)
							_this.showDataJson = arr;
							// 设置页面，加载模型
							_this.setView()
						}
					}).catch(function(error) {
						console.log(error)
					})
				},
				getMeasList(e) {
					let _this = this;
					let url = _this.url + '/backend-api/web/line/meas';
					let token = getParamValue('token')
					let header1 = getHeaderJson(token)
					let header2 = {
						"Content-Type": 'application/x-www-form-urlencoded'
					}
					let param = {};
					param.unit_id = this.unitId
					axios({
						headers: Object.assign(header1, header2),
						method: 'get',
						url: url,
						params: param
					}).then(function(response) {
						if (response.data.code === 1000) {
							_this.MeasList = response.data.data;
							if (_this.MeasList.length > 0) {
								_this.MeasName = _this.MeasList[0].name
								_this.meas_id = _this.MeasList[0].id
								e.forEach(item => {
									if (item.modelType == 2 || item.modelType == 3) {
										tipArr.push(item)
										tipMsg(item, response.data.data)
									}
								})
							}
							// _this.getMeasdetails()

						}
					}).catch(function(error) {
						console.log(error)
					})
				},
				openZiliao() {
					let _this = this;
					let url = _this.url + '/backend-api/eqp/set/unit/profile';
					let token = getParamValue('token')
					let header1 = getHeaderJson(token)
					let header2 = {
						"Content-Type": 'application/x-www-form-urlencoded'
					}
					let param = {};
					param.unitId = unitId2
					this.unitId = unitId2;
					axios({
						headers: Object.assign(header1, header2),
						method: 'get',
						url: url,
						params: param
					}).then(function(response) {
						if (response.data.code === 1000) {
							_this.unitDetail = response.data.data;
						}
					}).catch(function(error) {
						console.log(error)
					})
				},
				showTupu() {
					let url = this.url + '/backend-api/app/model/get';
					if (this.measType == 1000) {
						url = this.url + '/backend-api/web/spec/vib/qushifenxi';
					} else if (this.measType == 1002) {
						url = this.url + '/backend-api/web/spec/temp';
					}
					let _this = this;
					let token = getParamValue('token')
					let header1 = getHeaderJson(token)
					let header2 = {
						"Content-Type": 'application/x-www-form-urlencoded'
					}
					let param = {};
					param.meas_id = this.currentMeas2.id;
					param.meas_def = this.measDef;
					axios({
						headers: Object.assign(header1, header2),
						method: 'get',
						url: url,
						params: param
					}).then(function(res) {
						if (res.data.code === 1000) {
							_this.echarts_8(res.data.data);
						}
					}).catch(function(error) {})
				},
				setHighlight(item, type) {
					let Acolor = daColor;
					this.desc = "";
					this.clickId = "";
					this.clickIndex = null;
					overall.forEach((data, i) => {
						overall[i].material.color.set(overall[i].alarmColor);
					})
					if (item) {
						if (type == 1) {
							this.desc = item.alarmDesc;
							this.clickId = item.id;
							overall.forEach((data, i) => {
								if (data.ids == item.id) {
									overall[i].material.color.set(0x2388FF);
									app.$forceUpdate();
									return
								}
							})
						} else if (type == 2) {
							this.desc = "";
							this.clickId = "";
							this.clickIndex = null;
							overall.forEach((data, i) => {
								for (let item2 of item) {
									if (data.ids == item2.id) {
										overall[i].material.color.set(0x2388FF);
										app.$forceUpdate();
									}
								}
							})
						}
					}
				},
			}
		})
		app.openZiliao()

		function scrollto(e) {
			// 获取父盒子（肯定有滚动条）
			var parent = document.getElementById('parent');
			parent.scrollTop = document.getElementById('child' + e).offsetTop - document.getElementById('child' + e)
				.offsetHeight
		}
		//分解url获得数据部分
		function getUrlParams() {
			var search = window.location.search;
			// 写入数据字典 
			var tmparray = search.substr(1, search.length).split("&");
			var paramsArray = new Array;
			if (tmparray != null) {
				for (var i = 0; i < tmparray.length; i++) {
					var reg = /[=|^==]/; // 用=进行拆分，但不包括== 
					var set1 = tmparray[i].replace(reg, '&');
					var tmpStr2 = set1.split('&');
					var array = new Array;
					array[tmpStr2[0]] = tmpStr2[1];
					paramsArray.push(array);
				}
			}
			// 将参数数组进行返回 
			return paramsArray;
		}

		// 根据参数名称获取参数值 
		function getParamValue(name) {
			var paramsArray = getUrlParams();
			if (paramsArray != null) {
				for (var i = 0; i < paramsArray.length; i++) {
					for (var j in paramsArray[i]) {
						if (j == name) {
							return paramsArray[i][j];
						}
					}
				}
			}
			return null;
		}

		init();

		function init() {
			container = document.getElementById('info')
			//创建场景
			scene = new THREE.Scene();
			scene.background = new THREE.Color(0x000B17);
			scene.fog = new THREE.Fog(0x000B17, 2, 15);
			// 灯光
			var light = new THREE.HemisphereLight(0xefefff, 0x111122, 1)
			scene.add(light);

			//添加3维坐标。正式环境需要隐藏
			// const axesHelper = new THREE.AxesHelper(1.5);
			// scene.add(axesHelper);
			//创建渲染器
			renderer = new THREE.WebGLRenderer({
				antialias: true,
				alpha: true
			});
			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(width, height);
			renderer.gammaInput = true;
			renderer.gammaOutput = true;
			renderer.shadowMap.enabled = true;
			container.appendChild(renderer.domElement);
			//相机   透视投影照相机 /* 四个参数分别表示：多少度视角，相机的宽高比，最近距离，最远可视距离*/
			camera = new THREE.PerspectiveCamera(45, width / height, 0.005, 1500);
			camera.position.set(0, 0, 3);
			cameraTarget = new THREE.Vector3(0, 0, 0);
			//加入事件监听器,窗口自适应
			window.addEventListener('resize', onWindowResize, false);
			// renderer.domElement.addEventListener('mousedown', onMouseClick, false);
			// renderer.domElement.addEventListener('mousemove', onMouseMove);
		}

		function loaderFile(item, i, length) {
			return new Promise((resolve, reject) => {
				loader.load(item.stlFile, function(geometry) {
					var material = new THREE.MeshPhongMaterial({
						color: item.color,
						transparent: item.transparent == 1 ? true : false,
						opacity: item
							.opacity, // 定义物体的透明度。与 transparent 属性一起使用。该属性的赋值范围从 0 到 1。
						visible: true, //定义该材质是否可见。如果设置为 false,那么在场景中就看不到该物体。
						depthTest: true, //遮挡
					});
					overall[i] = new THREE.Mesh(geometry, material);
					overall[i].position.set(item.pointX, item.pointY, item.pointZ);
					overall[i].rotation.set(item.rotaX, item.rotaY, item.rotaZ);
					overall[i].scale.set(item.scaleX, item.scaleY, item.scaleZ);
					overall[i].rotateStatus = item.rotateStatus;
					overall[i].rotateSpeed = item.rotateSpeed;
					overall[i].rotateShaft = item.rotateShaft;
					overall[i].measId = item.measId;
					overall[i].alarmColor = item.color;
					overall[i].name = item.name;
					overall[i].ids = item.id;
					let obj = overall[i];
					if (item.measId) {
						clickArr.push(obj);
					}
					scene.add(overall[i]);
					cnt += 1; //加载成功数+1
					let sum = Math.round((cnt / length) * 100) + '%'
					if (cnt >= length) { //全部加载完
						requestAnimationFrame(render);
						resolve({
							type: true,
							sum: sum
						});
						reject(false);
					} else {
						resolve({
							sum: sum
						});
					}
				});
			})

		}

		function addShadowedLight(x, y, z, color, intensity) {
			var directionalLight = new THREE.DirectionalLight(color, intensity);
			directionalLight.position.set(x, y, z);
			scene.add(directionalLight);
			directionalLight.castShadow = true;
			var d = 1;
			directionalLight.shadow.camera.left = -d;
			directionalLight.shadow.camera.right = d;
			directionalLight.shadow.camera.top = d;
			directionalLight.shadow.camera.bottom = -d;
			directionalLight.shadow.camera.near = 1;
			directionalLight.shadow.camera.far = 4;
			directionalLight.shadow.mapSize.width = 1024;
			directionalLight.shadow.mapSize.height = 1024;
			directionalLight.shadow.bias = -0.002;
		}
		//可视窗口重置
		function onWindowResize() {
			//加入事件监听器,窗口自适应
			camera.aspect = width / height;
			camera.updateProjectionMatrix();
			renderer.setSize(width, height);
			labelRenderer.setSize(width, height);

		}


		//绘画渲染
		function render() {
			renderer.render(scene, camera);
			if (tipArr.length > 0) {
				labelRenderer.render(scene, camera);
			}
			requestAnimationFrame(animation); //请求再次执行渲染函数animation
		}
		//动画库
		function animation() {
			overall.forEach((item) => {
				if (item.rotateStatus == 1) {
					switch (item.rotateShaft) {
						case 'X':
							item.rotateX(item.rotateSpeed)
							break
						case 'Y':
							item.rotateY(item.rotateSpeed)
							break
						case 'Z':
							item.rotateZ(item.rotateSpeed)
							break
					}
				}
			})
			render()
		}

		function opentuPu(i, j) {
			let e = app.MeasList[j].data[i]
			e.meas_id = app.MeasList[j].id;
			if (!e.type) {
				e.type = 1000;
			}
			window.parent.postMessage({
				data: {
					row: e,
					rows: app.MeasList,
					type: 3
				}
			})
		}
		//插入提示框
		function tipMsg(item, arr) {
			for (let j in arr) {
				let ant = arr[j];
				if (ant.id == item.measId) {
					let tubiao, bjType, childHtml;
					if (ant.type == 1000) {
						bjType = 'zhendong'
						childHtml = `<div  class="box-right-item" onclick="opentuPu(0,'${j}')">
							<span>${ant.data[0].name}</span>
							<span class="color14B33C">${ant.data[0].num}</span>
						</div>
						<div  class="box-right-item" onclick="opentuPu(1,'${j}')">
							<span>${ant.data[1].name}</span>
							<span class="color14B33C">${ant.data[1].num}</span>
						</div>
						<div  class="box-right-item" onclick="opentuPu(2,'${j}')">
							<span>${ant.data[2].name}</span>
							<span class="color14B33C">${ant.data[2].num}</span>
						</div>`

					} else if (ant.type == 1002) {
						bjType = 'wendu'
						childHtml = `<div class="box-right-item" onclick="opentuPu(0,'${j}')">
							<span>${ant.data[0].name}</span>
							<span class="color14B33C">${ant.data[0].num}</span>
						</div>`
					}
					switch (ant.alarm) {
						case 0:
							tubiao = '0.png'
							break;
						case 1:
							tubiao = '1.gif'
							break;
						case 2:
							tubiao = '2.gif'
							break;
						case 3:
							tubiao = '3.gif'
							break;
						default:
							tubiao = '4.png'
					}
					let html = `<div class="boxRight" style="cursor:pointer">
						<div class="box-right-titlebox" >
							<img src="./img/monitoring/${bjType}${tubiao}" />
							<span>${ant.name}</span>
							<span></span>
						</div>
						${childHtml}
					</div>`
					//添加提示卡片
					const moonDiv = document.createElement('div');
					moonDiv.className = 'label';
					moonDiv.innerHTML = html
					const moonLabel = new THREE.CSS2DObject(moonDiv);
					moonLabel.position.set(item.endX, item.endY, item.endZ);
					scene.add(moonLabel);
					let material = new THREE.LineDashedMaterial({
						color: app.setColor('1DB712'), //线段的颜色
						dashSize: 0.01, //短划线的大小
						gapSize: 0.005 //短划线之间的距离
					});
					//画线
					let geometry = new THREE.Geometry();
					geometry.vertices.push(
						new THREE.Vector3(item.startX, item.startY, item.startZ), new THREE.Vector3(item.endX,
							item.endY,
							item.endZ)
					);
					line = new THREE.Line(geometry, material);
					line.computeLineDistances();
					scene.add(line)

					labelRenderer = new THREE.CSS2DRenderer();
					labelRenderer.setSize(width, height);
					labelRenderer.domElement.style.position = 'absolute';
					labelRenderer.domElement.style.top = '0px';
					container.appendChild(labelRenderer.domElement);
					const controls = new THREE.OrbitControls(camera, labelRenderer.domElement);
				}
			}

		}




		//轨道控制 镜头的移动
		var controlss = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象
	</script>
</html>
